<template>
    <div>
        <div class="topBtn">
            <div class="sizeBig"><span>角色管理</span></div>
            <div>
              
            </div>
        </div>
        <div class="message">
            <p class="character">1.根据部门岗位分工，按照岗位小组设置对应角色。角色设置完成后，可以根据角色来配置系统用户权限。 <span style="color: #0095FF;margin-left: 10px;cursor: pointer;">帮助文档</span></p>
        </div>
        <div class="roleTree">
            <div class="roleTreeLeft">
                <div class="roleContent">  
                 <Tree :reset="reset" v-on:getClickData="getClickData" v-on:removeData="removeData" v-on:compileData="compileData(arguments)"></Tree>
                </div>
            </div>
            <div class="roleTreeRight">
                <div class="example"><span>示例</span></div>
                <div class="roleContent">  
                 <examTree :reset="reset"></examTree>
                </div>
            </div>  
        </div>
        <el-dialog
          title="添加组织"
          :visible.sync="dialogVisible"
          width="500px"
          top="250px"
          >
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="角色名称：" prop="departmentName">
                <el-input v-model="ruleForm.departmentName"></el-input>
              </el-form-item>
            </el-form>
            <div class="btncon">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Tree from './components/roleTree'
import examTree from './components/roleExampleTree'
import {organizationManage,changeOrganization,removeOrganization,redactData} from '@/api/organization'

export default {
    name:'role',
    data(){
        return{
            reset:[],   //初始化角色数据
            dialogVisible:false,  //添加角色弹出框
            getAddData:'',
            ruleForm:{
                departmentName:''
            },
            rules: {
            departmentName: [
                { required: true, message: '请输入角色姓名', trigger: 'blur' },
                { min: 1, max: 12, message: '长度在 1 到 12 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    components:{
        Tree,
        examTree
    },
    methods:{ 
        getClickData(val){
            this.getAddData=val
        },
        cancel(){
            this.ruleForm={}
            this.dialogVisible=false
        },
        removeData(val){
             this.$confirm('此操作将永久删除该组织, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            removeOrganization({departmentID:val.DepartmentID}).then((res)=>{
                this.$message({
                    type: 'success',
                    message: res.Message
                });
                this.resetData()
            }).catch((error)=>{
                console.log(error)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        },
        // 初始化
        resetData(){
         organizationManage().then((res)=>{
                console.log(res)
                this.reset=res.Result
            }).catch(error=>{
                console.log(error)
            })
        },
        compileData(val){
            console.log(val)
            redactData({departmentID:val[0].DepartmentID,parentID:val[0].ParentID,departmentName:val[1],code:'',description:''}).then((res)=>{
                alert(res.Message)
                this.resetData()
            }).catch((error)=>{
                console.log(error)
            })
        },
        confirm(){
            if(this.ruleForm.departmentName==""){
                alert('添加角色的名称不能为空')
            }else{
                changeOrganization({parentID:this.getAddData.DepartmentID,departmentName:this.ruleForm.departmentName,code:'',description:''}).then((res)=>{
                    alert('添加成功')
                this.dialogVisible=false
                this.resetData()
                }).catch((error)=>{
                    console.log(error)
                })
            }
            
        }
    },
    created(){
        this.resetData()
    }
}
</script>

<style lang="scss" scoped>
.btncon{
  margin-left:100px ;
}
.sizeBig{
    font-size: 16px;
}
.topBtn{
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
}
.message{
    width:98%;
    margin: 0 auto;
    height:60px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238,238,238,1);
    font-size:14px;
    .character{
        margin: 20px 0 21px 20px;
        color:#999999;
        .skip{
            color: #0095FF;
            margin-left:10px;
            cursor:pointer; 
        }
    }
}
.roleTree{
    width:99%;
    margin: 0 auto;
    display: flex;
    .roleTreeLeft{  
        flex: 1;
        .roleContent{
            margin: 70px 0 0 150px;
            width: 420px;
        }
    }
    .roleTreeRight{
        flex: 1;
        height: 720px;
        border-left: 1px solid #999999;
        .example{
            margin: 10px 0 0 20px;
        }
        .roleContent{
            margin: 45px 0 0 150px;
            width: 350px;
        }
    }
}
</style>
